import React, { useCallback } from 'react'
import './Login.scss'
import Particles from "react-particles";
import { loadFull } from "tsparticles";
import {myLogin} from '../../api/boxApi'


import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input,message } from 'antd';

export default function Login(props) {

    const particlesInit = useCallback(async engine => {
        // console.log(engine);
        await loadFull(engine);
    }, []);
    const particlesLoaded = useCallback(async container => {
        await console.log(container);
    }, []);
    // 登录按钮回调
    const onFinish = (values) => {
        myLogin( {
            userName: values.username,
            passWord:values.password
        }).then((res) => { 
            console.log(res);
            if (res.data?.code === 500) { 
                message.error(res.data.msg)
            } else if (res.code === 0) {
                message.success('登录成功！')
                localStorage.setItem("token", JSON.stringify(res.userVo))
                props.history.push("/")
                // 刷新页面重新获取token
                window.location.reload()
            }
        })
    };

    return (
        <div style={{ height: '100vh', background: '#cbd5e1' }}>
            <Particles id="tsparticles"
                init={particlesInit} loaded={particlesLoaded}
                options={{
                    "background": {
                        "color": {
                            "value": "rgb(35, 39, 65)"
                        },
                        "position": "50% 50%",
                        "repeat": "no-repeat",
                        "size": "cover"
                    },
                    "fullScreen": {
                        "enable": true,
                        "zIndex": 1
                    },
                    "interactivity": {
                        "events": {
                            "onClick": {
                                "enable": true,
                                "mode": "push"
                            },
                            "onHover": {
                                "enable": true,
                                "mode": "bubble",
                                "parallax": {
                                    "force": 60
                                }
                            }
                        },
                        "modes": {
                            "bubble": {
                                "distance": 400,
                                "duration": 2,
                                "opacity": 1,
                                "size": 40
                            },
                            "grab": {
                                "distance": 400
                            }
                        }
                    },
                    "particles": {
                        "color": {
                            "value": "#ffffff"
                        },
                        "links": {
                            "color": {
                                "value": "#ffffff"
                            },
                            "distance": 150,
                            "opacity": 0.4
                        },
                        "move": {
                            "attract": {
                                "rotate": {
                                    "x": 600,
                                    "y": 1200
                                }
                            },
                            "enable": true,
                            "outModes": {
                                "default": "bounce",
                                "bottom": "bounce",
                                "left": "bounce",
                                "right": "bounce",
                                "top": "bounce"
                            },
                            "speed": 6
                        },
                        "number": {
                            "density": {
                                "enable": true
                            },
                            "value": 170
                        },
                        "opacity": {
                            "animation": {
                                "speed": 0.5,
                                "minimumValue": 0.1
                            }
                        },
                        "shape": {
                            "options": {
                                "character": {
                                    "fill": false,
                                    "font": "Verdana",
                                    "style": "",
                                    "value": "*",
                                    "weight": "400"
                                },
                                "char": {
                                    "fill": false,
                                    "font": "Verdana",
                                    "style": "",
                                    "value": "*",
                                    "weight": "400"
                                },
                                "polygon": {
                                    "nb_sides": 5
                                },
                                "star": {
                                    "nb_sides": 5
                                },
                                "image": {
                                    "height": 32,
                                    "replace_color": true,
                                    "src": "./logo1.png",
                                    "width": 32
                                },
                                "images": {
                                    "height": 32,
                                    "replace_color": true,
                                    "src": "./logo1.png",
                                    "width": 32
                                }
                            },
                            "type": "image"
                        },
                        "size": {
                            "value": 16,
                            "animation": {
                                "speed": 30,
                                "minimumValue": 0.1
                            }
                        },
                        "stroke": {
                            "color": {
                                "value": "#000000",
                                "animation": {
                                    "h": {
                                        "count": 0,
                                        "enable": false,
                                        "offset": 0,
                                        "speed": 10,
                                        "sync": true
                                    },
                                    "s": {
                                        "count": 0,
                                        "enable": false,
                                        "offset": 0,
                                        "speed": 10,
                                        "sync": true
                                    },
                                    "l": {
                                        "count": 0,
                                        "enable": false,
                                        "offset": 0,
                                        "speed": 10,
                                        "sync": true
                                    }
                                }
                            }
                        }
                    }
                }}
            />
            <div className='loginForm'>
                <p className='loginTittle'>系统用户登录</p>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名!',
                            },
                        ]}
                        hasFeedback
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                        hasFeedback
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"

                        />
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" block htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
